<template>
  <view class="container">
   
    <view class="header">
      <text>学号：2531010120120</text>
      <text>姓名：林铭恒</text>
    </view>

   
    <view class="form-container">    
      <view class="form-item">
        <text class="label">用户名：</text>
        <input 
          type="text" 
          v-model="username" 
          placeholder="请输入用户名"
          class="input"
        />
      </view>

      
      <view class="form-item">
        <text class="label">密码：</text>
        <input 
          type="password" 
          v-model="password" 
          placeholder="请输入密码"
          class="input"
        />
      </view>

     
      <view class="form-item">
        <text class="label">性别：</text>
        <radio-group v-model="gender" class="radio-group">
          <label class="radio-label">
            <radio value="male" />男
          </label>
          <label class="radio-label">
            <radio value="female" />女
          </label>
        </radio-group>
      </view>

   
      <view class="form-item">
        <text class="label">出生日期：</text>
        <picker 
          mode="date" 
          :value="birthday" 
          @change="onBirthdayChange"
          start="1900-01-01"
          end="2023-12-31"
          class="picker"
        >
          <view class="picker-view">
            {{ birthday || '请选择出生日期' }}
          </view>
        </picker>
      </view>

      <!-- 注册按钮 -->
      <view class="form-item">
        <button 
          type="primary" 
          @click="handleRegister"
          class="register-btn"
        >
          注册
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
      username: '',
      password: '',
      gender: '',
      birthday: ''
    };
  },
  methods: {
   
    onBirthdayChange(e) {
      this.birthday = e.detail.value;
    },
  
    handleRegister() {
     
      console.log('注册信息：', {
        username: this.username,
        password: this.password,
        gender: this.gender,
        birthday: this.birthday
      });
      
      if (!this.username || !this.password || !this.gender || !this.birthday) {
        alert('请完善所有信息');
        return;
      }
      alert('注册成功！');
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  border-bottom: 1px solid #eee;
}

.form-container {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  flex-wrap: wrap;
}

.label {
  width: 160rpx;
  font-size: 30rpx;
  color: #333;
}

.input {
  flex: 1;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 5rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.radio-group {
  display: flex;
  gap: 40rpx;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.picker {
  flex: 1;
}

.picker-view {
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 5rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #666;
}

.register-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
}
</style>